 <template>
    <div class="cent"  v-loading="loading" :updateStatusData="updateStatusData">
      <div class="left nav">
        <p :class="{'check':fromData.bizType==1}" @click="handleClick(1)"><span class="imgBoxs" ><img :src="fromData.bizType==1? trian2:trian"/></span><span>铁路运输</span></p>
        <p :class="{'check':fromData.bizType==2}" @click="handleClick(2)"><span class="imgBoxs" ><img :src="fromData.bizType==2? bold:bold2" /></span><span>海上运输</span></p>
      </div>
      <div class="left centBox">
        <p class="textTitle" style=""> 请填写询价相关信息</p>
        <div class="page1" v-show="fromData.bizType==1">
          <!-- 铁路运输填写--->
          <table  width="100%" border="0" cellspacing="1" cellpadding="0" > 
            <tr >
              <td width="200px;">发站代码*</td><td > <input type="text" v-model="fromData.origin" ></td>
              <td width="200px;">货物重量</td > <td  class="dan"><input type="text" v-model="fromData.weight" @keyup="keyUp(fromData.weight,'weight')"><span> kg</span></td>
            </tr>
            <tr>
              <td width="200px;">到站代码*</td><td ><input type="text" v-model="fromData.dest"></td>
              <td width="200px;">货物体积</td> <td class="dan"><input type="text" v-model="fromData.volume" @keyup="keyUp(fromData.volume,'volume')"><span> cbm</span></td>
            </tr>
            <tr>
              <td width="200px;">过境口岸</td> <td ><input type="text" v-model="fromData.transitPort"></td>
              <td width="200px;">公司名称*</td><td ><input type="text" v-model="fromData.customerName"></td>
            </tr>
            <tr>
              <td width="200px;">车型</td> <td ><input type="text" v-model="fromData.truckMode" ></td>
              <td width="200px;">姓名*</td><td ><input type="text" v-model="fromData.cttName"></td>
            </tr>
            <tr>
              <td width="200px;">货品名*</td><td ><input type="text" v-model="fromData.goodsName"></td>
              <td width="200px;">联系方式*</td> <td ><input type="text" v-model="fromData.cttPhone" @keyup="keyUp(fromData.cttPhone,'cttPhone')"></td>
            </tr>
            <tr >
              <td width="200px;">箱型*</td> <td class="dan">
              <el-select v-model="fromData.cartonType" placeholder="请选择"  style="width: 100%">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
              <td width="150px;">箱量*</td><td class="dan"><input type="text" v-model="fromData.cartonCount"  @keyup="keyUp(fromData.cartonCount,'cartonCount')" style="width: 70%"> <span> TEU</span></td>
            </tr>
            <tr>
              <td width="150px;">贸易条款</td> <td ><textarea  v-model="fromData.serviceTerm"/></td>
              <td width="150px;">备注</td> <td ><textarea  v-model="fromData.remark"/> </td>
            </tr>
          </table>
        </div>
        <div class="page2" v-show="fromData.bizType==2">
          <!-- 海上运输填写--->
          <table  width="100%" border="0" cellspacing="1" cellpadding="0" > 
            <tr >
              <td width="200px;">起运地/起运港*</td><td > <input type="text" v-model="fromData.origin" ></td>
              <td width="200px;">重量</td> <td class="dan"><input type="text" v-model="fromData.weight" @keyup="keyUp(fromData.weight,'weight')"><span> kg</span></td>
            </tr>
            <tr>
              <td width="200px;">目的地/目的港*</td><td ><input type="text" v-model="fromData.dest"></td>
              <td width="200px;">体积:</td> <td class="dan"><input type="text" v-model="fromData.volume" @keyup="keyUp(fromData.volume,'volume')"> <span> cbm</span></td>
            </tr>
            <tr>
              <td width="200px">品名*</td><td ><input type="text" v-model="fromData.goodsName"></td>
              <td width="200px">货值</td> <td class="dan"><input type="text" v-model="fromData.cvalue" @keyup="keyUp(fromData.cvalue,'cvalue')"> <span> 元</span></td>
            </tr>
            <tr>
              <td width="200px">公司名称*</td> <td ><input type="text" v-model="fromData.customerName"></td>
              <td width="200px">ETD/ETA*</td><td ><input type="text" v-model="fromData.ETD"></td>
            </tr>
            <tr >
              <td width="200px">姓名*</td> <td ><input type="text" v-model="fromData.cttName"></td>
              <td width="200px">箱型*</td> <td class="dan">
              <el-select v-model="fromData.cartonType" placeholder="请选择箱型"  style="width: 100%">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
            </tr>
            <tr>
              <td width="200px">联系方式*</td> <td ><input type="text" v-model="fromData.cttPhone" @keyup="keyUp(fromData.cttPhone,'cttPhone')"></td>
              <td width="200px">箱量*</td> <td class="dan" ><input type="text" v-model="fromData.cartonCount" @keyup="keyUp(fromData.cartonCount,'cartonCount')"><span> TEU</span></td>
            </tr>
            <tr>
              <td width="200px">备注</td> <td >
              <div>
                <textarea type="text"  v-model="fromData.remark"/>
              </div>
            </td>
              <td width="200px"></td> <td ></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="cleae">
        <el-button type="primary"  class="sub" @click="sbuimt()" style="margin-top: 35px;background-color: #0061a1;color:#fff;border: 0px none"> 提交 </el-button>
      </div>
    </div>
  </template>
  <style scoped>
 table{border-right:1px solid #909090;border-bottom:1px solid #909090;margin: auto}
 table  td{border-left:1px solid #909090;border-top:1px solid #909090;font-size: 12px;line-height:38px;font-family: "Adobe 宋体 Std L"}
 .el-tabs__active-bar {display: none}
 .cent{width:70%;background-color:#fff;padding:40px 40px 0px 40px;min-width:1000px;max-width: 1200px;margin:auto}
  input{width: 100%;border:0px none;background: none;line-height: 38px;}
 textarea{width: 100%;background: none;border: 0px none;height:.8rem;resize:none}
  .dan{text-align: left}
 .dan input{width: 70%}
 .nav{width: 23%;padding-top: .6rem; font-size: 16px;max-width: 580px}
 .nav p{padding: .18rem 0px;line-height: 30px;cursor: pointer }
 .textTitle{font-size: 12px;text-align: left;margin: auto;line-height: 25px;padding-bottom: 8px;font-family: "Adobe 宋体 Std L"}
 .centBox{width: 68%; }
 .sub{width: 1.7rem;font-size: .16rem;font-weight: bold;background: #0062a2;padding-top: .15rem;padding-bottom: .15rem}
  .imgBoxs {  margin-right: .2rem}
 .imgBoxs img{width: 50px ;position: relative;top: 6px}
 .nav  .check{color: #0062a2}


 @media only screen and (min-width: 1200px){
   .nav{width: 27%;padding-top: .6rem; font-size: 14px;max-width: 580px}
   .imgBoxs img{width: 30px ;position: relative;top: 2px}
   table  td{border-left:1px solid #909090;border-top:1px solid #909090;font-size: 12px;line-height:38px}
   input{width: 100%;border:0px none;background: none;line-height: 38px;}
 }
 @media only screen and (min-width: 1400px){
   .nav{width: 27%;padding-top: .6rem; font-size: 15px;max-width: 580px}
   .imgBoxs img{width: 40px ;position: relative;top: 4px}
   table  td{border-left:1px solid #909090;border-top:1px solid #909090;font-size: 12px;line-height:38px}
   input{width: 100%;border:0px none;background: none;line-height: 38px;}
 }
 @media only screen and (min-width: 1600px){
   .nav{width: 25.4%;padding-top: .6rem; font-size: 16px;max-width: 580px}
   .imgBoxs img{width: 50px ;position: relative;top: 6px}
   table  td{border-left:1px solid #909090;border-top:1px solid #909090;font-size: 12px;line-height:38px}
   input{width: 100%;border:0px none;background: none;line-height: 38px;}
 }

</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import {mapState, mapActions} from 'vuex'
  import bold from '../../../../static/img/bold.png'
  import trian from '../../../../static/img/trian.png'
  import trian2 from '../../../../static/img/reian2.png'
  import bold2 from '../../../../static/img/bold2.png'
  export default {
    name: 'my-adminChart',
    data () {
      return {
        tabPosition: 'left',
        trian:trian,
        bold:bold,
        trian2:trian2,
        bold2:bold2,
        fromData: {
          "id": null,//订单id
          "number": null,//订单编号
          "customerName": null,//客户名称
          "cttName": null,//联系人
          "cttPhone": null,//联系电话
          "bizType": 1,//订单类型

          "origin": null,//起始的
          "dest": null,//目的地

          "truckMode": null,//车型
          "goodsName": null,//货物名称
          "cartonType": null,//箱型
          "cartonCount": null,//箱量
          "weight": null,//重量
          "volume": null,//体积
          "etad": null,//预计时间和到达时间
          "cvalue": null,// 货值
          "transitPort": null,//过境口岸
          "serviceTerm": null,//服务条款
          "csuserId": null,//客服状态
          "remark": null,//备注
          "createTime": null,
          ETD: ''
        },
        options: [{
          value: '20GP',
          label: '20GP'
        }, {
          value: '40GP',
          label: '40GP'
        }, {
          value: '40HQ',
          label: '40HQ'
        }],
        loading:false
      }
    },
    methods:{
      ...mapActions({
          addQuotation:'addQuotation',
        }),
      sbuimt () {
       var ruleCode = this.rule()
        if(ruleCode){
          this.openError(ruleCode)
          return
      }
        this.loading = true
        var parm = {
          "customerName":this.fromData.customerName,//客户公司名称
          "cttName":this.fromData.cttName,//联系人
          "cttPhone":this.fromData.cttPhone,//联系电话
          "bizType":parseInt(this.fromData.bizType),//订单类型
          "origin":this.fromData.origin,//起始的
          "dest":this.fromData.dest,//目的地
          "truckMode":this.fromData.truckMode,//车型
          "goodsName":this.fromData.goodsName,//货物名称
          "cartonType":this.fromData.cartonType,//箱型
          "cartonCount":parseInt(this.fromData.cartonCount),//箱量
          "weight":parseInt(this.fromData.weight),//重量
          "volume":parseInt(this.fromData.volume),//体积
          "cvalue":parseInt(this.fromData.cvalue),// 货值
          "transitPort":this.fromData.transitPort,//过境口岸
          "serviceTerm":this.fromData.serviceTerm,//服务条款
          "remark":this.fromData.remark,//备注
        }
        this.addQuotation(parm)
      },
      // 操作是否成功
      listStatus (res) {
        this.loading=false
        if (res.status == 0) {
          // 修改成功
          var text = '';
          if(res.code == 'updateQuotation'){
            text = "修改成功"}
          if(res.code == 'addQuotation'){
            text = "提交成功，客服将会尽快与您联系!"
          }
          this.openSuccess(text);
          // 刷新列表
        var parm = {
            "id": null,//订单id
              "number": null,//订单编号
              "customerName": null,//客户名称
              "cttName": null,//联系人
              "cttPhone": null,//联系电话
              "bizType": this.fromData.bizType,//订单类型
              "origin": null,//起始的
              "dest": null,//目的地

              "truckMode": null,//车型
              "goodsName": null,//货物名称
              "cartonType": null,//箱型
              "cartonCount": null,//箱量
              "weight": null,//重量
              "volume": null,//体积
              "etad": null,//预计时间和到达时间
              "cvalue": null,// 货值
              "transitPort": null,//过境口岸
              "serviceTerm": null,//服务条款
              "csuserId": null,//客服状态
              "remark": null,//备注
              "createTime": null,
              ETD: ''
          }
          this.fromData = parm
          // var parm = {
          //   id: this.fromData.id
          // }
          // this.showQuotationDetails(parm)
        }
        if (res.status != 0) {
          // 修改 修改失败
          if(res.code == 'updateQuotation'){
            // 刷新列表
            text = "修改失败"
          }
          if(res.code == 'addQuotation'){
            text = "添加失败"
            // 刷新列表
          }
          this.openError(text)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      handleClick(a) {
        this.fromData.bizType = a
      },
      // 校验
      rule() {
        var ret = ''
        // 铁路运输的 的 表单验证验证
        if (this.fromData.bizType == 1) {
          if (!this.fromData.origin) {
            ret = '发站代码不能为空'
            return ret
          }
          if (!this.fromData.dest) {
            ret = '到站代码不能为空'
            return ret
          }
          if (!this.fromData.goodsName) {
            ret = '货品名不能为空'
            return ret
          }
        }
        // 海上运输的表单验证
        if (this.fromData.bizType == 2) {
          if (!this.fromData.origin) {
            ret = '起运地/起运港不能为空'
            return ret
          }
          if (!this.fromData.dest) {
            ret = '目的地/目的港不能为空'
            return ret
          }
          if (!this.fromData.goodsName) {
            ret = '品名不能为空'
            return ret
          }
        }
        // 通用验证
        if (!this.fromData.cartonType) {
          ret = '箱型不能为空'
          return ret
        }
        if (!this.fromData.cartonCount) {
          ret = '箱量不能为空'
          return ret
        }
        if (!this.fromData.customerName) {
          ret = '公司名称不能为空'
          return ret
        }
        if (!this.fromData.cttName) {
          ret = '姓名不能为空'
          return ret
        }
        if (!this.fromData.cttPhone) {
          ret = '联系方式不能为空'
          return ret
        }
      },
      keyUp(parm,status){
        parm = parm.replace(/[^0-9-]+/,'');
        if(status == 'cttPhone'){
          this.fromData.cttPhone = parm
        }
        if(status == 'weight'){
          this.fromData.weight = parm
        }
        if(status == 'volume'){
          this.fromData.volume = parm
        }
        if(status == 'cvalue'){
          this.fromData.cvalue = parm
        }
      }
    },
    computed: {
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      ...mapState([
        'Detail',
        'updateStatus',
        'language',
        'show'
      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

